<template>
 <div class="cmt-wrapper" v-if="dataList">

   <!-- 内容 -->
    <div class="cmt-item" v-for="(item, index) in dataList" :key="index">
      <!-- 用户信息 -->
        <div class="cmt-info">
          <img :src="$axios.defaults.baseURL+`${item.account.defaultAvatar}`" alt=""> {{item.account.nickname}}
          <i>{{item.account.created_at | fromDate}}</i>
          <span>{{item.level}}</span>
        </div>

        <div class="cmt-content">
          <ParentComment :parentData="item.parent"/>
          {{item.content}}
          <a href="#" class="cmt-ctrl"><i>回复</i></a>
        </div>
    </div>
 </div>
</template>

<script>
import ParentComment from '@/components/post/ParentComment'
export default {
  components:{
    ParentComment,
  },
  data(){
    return{
      dataList:null,
      flag:false,
    }
  },
  filters:{
    fromDate(time){
       var moment = require('moment'); 
      return moment(time).format("YYYY-MM-DD hh:mm")
    }
  },
  created(){
    this.$axios({
      url:'/posts/comments',
      params:{
        _limit:20,
        _start:0
      }
    }).then(res=>{
      console.log(res.data,999);
      this.dataList = res.data.data
    })
  }
}
</script>

<style lang="less" scoped>
.cmt-wrapper{
  width: 100%;
  // height: 700px;
  border: 1px solid #ddd;
  .cmt-item{
    padding: 20px 20px 5px;
    border-bottom: 1px dashed #ddd;
    &:last-child{
      border-bottom: none;
    }
    .cmt-content{
      padding: 20px 10px 0px;
      &:hover .cmt-ctrl{
        i{
          display: block;
        }
      }
      .cmt-ctrl{
      display: block;
      height: 20px;
      line-height: 20px;
      text-align: right;
      font-size: 12px;
      color: #1e50a2;
      // display: none;

      i{
        display: none;
        &:hover{
          text-decoration: underline;
          
        }
      }
    }

    }

    .cmt-info{
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #666;
      img{
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-right: 5px;
      }
      i{
        margin-left: 5px;
        color: #999;
        flex: 1;
      }
    }
    // .cmt-ctrl{
    //   display: block;
    //   height: 20px;
    //   line-height: 20px;
    //   text-align: right;
    //   font-size: 12px;
    //   color: blue;
    //   display: none;

    //   i{
    //     &:hover{
    //       text-decoration: underline;
          
    //     }
    //   }
    // }
  }
}
</style>